<template>
    <el-row :gutter="15">
        <el-col :span="6">
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-card class="box-card pr" shadow="hover" :body-style="{ padding: '0px' }">
                        <template #header>
                            <div style="font-size: 12px;font-weight: 400;">
                                <span>今日销售额</span>
                            </div>
                        </template>
                        <div class="card-body" v-if="users.transaction && users.transaction.todaySaleAmount"><span style="font-size: 18px;"><span style="font-size: 12px">￥</span>{{users.transaction.todaySaleAmount.amount}}</span></div>
                    </el-card>
                </el-col>
                <el-col :span="24">
                    <el-card class="box-card pr" shadow="hover" :body-style="{ padding: '0px' }">
                        <template #header>
                            <div style="font-size: 12px;font-weight: 400;">
                                <span>今日新增用户</span>
                            </div>
                        </template>
                        <div class="card-body" v-if="users.user && users"><span style="font-size: 15px;">{{users.user.todayAddNumber}} <span style="font-size: 12px;">人</span></span></div>
                    </el-card>
                </el-col>
            </el-row>
        </el-col>
		<el-col :span="6">
            <el-card class="box-card pr" shadow="hover" style="height: 173px;">
                <template #header>
                    <div style="font-size: 12px;font-weight: 400;">
                        <span>参培企业</span>
                    </div>
                </template>
				<div class="card-body" v-if="users.company && users">
                	<span style="font-size: 18px;">{{users.company.total}} <span style="font-size: 12px">家</span></span>
				</div>
                <div class="other-info" v-if="users.company">
                    周同比：{{weekende(users.company.nowWeekNumber,users.company.prevWeekNumber)}}%
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card pr" shadow="hover" style="height: 173px;">
                <template #header>
                    <div style="font-size: 12px;font-weight: 400;">
                        <span>用户总数</span>
                    </div>
                </template>
				<div class="card-body" v-if="users && users.user">
                <span style="font-size: 18px;">{{users.user.total}} <span style="font-size: 12px;">门</span></span>
				</div>
                <div class="other-info" v-if="users.user">
                    周同比：{{weekende(users.user.nowWeekNumber,users.user.prevWeekNumber)}}%
                </div>
            </el-card>
        </el-col>
		<el-col :span="6">
            <el-card class="box-card pr" shadow="hover" style="height: 173px;">
                <template #header>
                    <div style="font-size: 12px;font-weight: 400;">
                        <span>平台课程</span>
                    </div>
                </template>
				<div class="card-body" v-if="users && users.course">
                <span style="font-size: 18px;">{{users.course.total}} <span style="font-size: 12px;">门</span></span>
				</div>
                <div class="other-info"  v-if="users && users.course">
                    周同比：{{weekende(users.course.nowWeekNumber,users.course.prevWeekNumber)}}%
                </div>
            </el-card>
        </el-col>
        
        
    </el-row>
</template>

<script>
	import scEcharts from '@/components/scEcharts';

	export default {
		title: "统计",
		icon: "el-icon-data-line",
		description: "学习统计",
		components: {
			scEcharts
		},
		data() {
			return {
				loading: true,
				option: {},
				users: {}
			}
		},
		created() {
			var _this = this;
			setTimeout(function() {
				_this.loading = false
			}, 500);

			var option = {
				tooltip: {
					trigger: 'axis'
				},
				xAxis: {
					boundaryGap: false,
					type: 'category',
					data: (function (){
						var now = new Date();
						var res = [];
						var len = 15;
						while (len--) {
							res.unshift(now.toLocaleTimeString().replace(/^\D*/,''));
							now = new Date(now - 2000);
						}
						return res;
					})()
				},
				yAxis: [{
					type: 'value',
                    minInterval: 1,
					"splitLine": {
						"show": false
					},
                    axisLabel: {
                        formatter: function (value) {
                            return value + '家';
                        }
                    }
				}],
				series: [
					{
						name: '企业数量',
                        type: 'bar',
						barWidth: '15px',
						symbol: 'none',
						lineStyle: {
							width: 1,
							color: '#409EFF'
						},
						areaStyle: {
							opacity: 0.1,
							color: '#79bbff'
						},
						data: (function (){
							var res = [];
							var len = 15;
							while (len--) {
								res.push(Math.round(Math.random() * 0));
							}
							return res;
						})()
					},
				],
			};
			this.option = option;

		},
		mounted(){
		    this.users = this.$TOOL.data.get("pc_home_admin")
			var _this = this;
			setInterval(function (){
				var o = _this.option;

				o.series[0].data.shift()
				o.series[0].data.push(Math.round(Math.random() * 100));

				o.xAxis.data.shift();
				o.xAxis.data.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));


				//_this.$refs.c1.myChart.setOption(o)
			},2100)

		},
		methods: {
			//计算周同比
			weekende(a,b) {
				let d = 0
				if(a!==0 && b!==0){
                    d = a/b
				}
                let c = (d - 1)*100
				c = parseFloat(c.toFixed(2))
				return c
			},
		}
	}
</script>

<style scoped>
.other-info{border-top: 1px solid #e6e6e6; padding: 10px 20px;position: absolute; left: 0; bottom: 0; right: 0;}
.card-body{padding: 9px 20px 15px; }
</style>
